<template>
    <div class="nb-head-layout">
        <div class="nb-head-wrapper">
            <div class="logo">
                <a href="/"><img :src="logoUrl" /></a>
            </div>

            <div class="ml-[100px]">
                <a-button
                    style="background-color: #f4faf9"
                    type="primary"
                    v-if="route.path === '/'"
                    ghost
                    shape="round"
                    href="/"
                >
                    个性化定制
                </a-button>
                <a-button
                    v-else
                    style="background-color: #eeeeee; color: #262626"
                    ghost
                    shape="round"
                    href="/"
                >
                    个性化定制
                </a-button>
            </div>

            <a-menu
                @click="handleMenuClick"
                class="nb-menus"
                v-model:selectedKeys="current"
                popupClassName="nb-sub-menus"
                mode="horizontal"
            >
                <template v-for="(ki, idx) in menuList" :key="ki.key">
                    <a-menu-item v-if="!ki.children?.length" :key="ki.key">
                        {{ ki.label }}
                    </a-menu-item>

                    <a-sub-menu
                        v-else
                        :key="idx"
                        :title="ki.label"
                        popupClassName="nb-sub-menus"
                    >
                        <template
                            v-for="(kv, vdx) in ki.children"
                            :key="kv.key"
                        >
                            <a-menu-item>{{ kv.label }}</a-menu-item>
                        </template>
                    </a-sub-menu>
                </template>
            </a-menu>
        </div>
    </div>
</template>

<script setup name="PCHeadLayout">
import { watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { replaceLast } from '@/utils'
import logoUrl from '@/assets/images/logo.png'

const router = useRouter()
const route = useRoute()

const menuList = ref([
    {
        label: '价值观',
        key: 'corporate',
        children: [
            {
                key: 'corporate',
                label: '科学严谨'
            },
            {
                key: 'corporate/integrity',
                label: '正直诚信'
            },
            {
                key: 'corporate/proactive',
                label: '积极进取'
            },
            {
                key: 'corporate/achieve',
                label: '成就用户'
            }
        ]
    },
    {
        key: 'product',
        label: '品牌介绍'
    },
    {
        key: 'about',
        label: '联系我们'
    }
])

const current = ref([])

// 判断路由信息是否符合要求
const validateRoutePath = (route, path) => {
    if (route.key === path) {
        return true
    }
    let _path = route.path || `/${route.key}`
    // 自动处理尾部/问题
    return replaceLast(_path, '/') === replaceLast(path, '/')
}

const findRoute = (key, menus) => {
    let nowRoute = null
    menus?.some(m => {
        if (validateRoutePath(m, key)) {
            nowRoute = m
            return true
        }

        // 在查询route信息
        nowRoute = findRoute(key, m.children)
        return !!nowRoute
    })
    return nowRoute
}

const dingRoute = path => {
    const nMenu = findRoute(path, menuList.value)
    if (nMenu) {
        current.value = [nMenu.key]
    } else {
        current.value = []
    }
}

const handleMenuClick = ({ key }) => {
    router.push(`/${key}`)
}

watch(
    () => route.path,
    nVal => {
        dingRoute(nVal)
    }
)

onMounted(() => {
    dingRoute(route.path)
})
</script>

<style lang="less" scoped>
/* 自定义子菜单样式 */
:deep(.nb-sub-menus) {
    .ant-menu-item {
        &:hover {
            background-color: #b91b1b; /* 修改移入背景色 */
        }
    }
}
:deep(.ant-menu-title-content) {
    font-size: 18px !important;
}
.nb-head-layout {
    height: 100px;
    width: 100%;
    z-index: 100;
    user-select: none;
    .nb-head-wrapper {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100px;
        justify-content: space-between;
        .logo {
            width: 144px;
            img {
                width: 100%;
            }
        }

        .nb-menus {
            flex: 1;
            list-style: none;
            display: flex;
            justify-content: flex-end;
            font-size: 16px;
            border-bottom: 0px;
            :deep(.ant-menu-item) {
                padding: 0px 30px;
                &::after {
                    content: '';
                    display: none;
                }
            }
        }
    }
}

:deep(.menu-icon) {
    font-size: 12px;
    margin-left: 4px;
    color: #666;
    transition: transform 0.3s;
}

:deep(.ant-menu-submenu-open) {
    .menu-icon {
        transform: rotate(180deg);
    }
}
</style>
